<template>
	<view class="new-users">
		<view class="head">
			<view class="user-card">
				<view class="bg"></view>
				<view class="user-info">
					<image class="avatar" :src="userInfo.avatar" v-if="userInfo.avatar" @click="goEdit()"></image>
					<image v-else class="avatar" src="/static/images/f.png" mode="" @click="goEdit()"></image>
					<view class="info">
						<!-- #ifdef MP -->
						<view class="name" v-if="!userInfo.uid" @tap="openAuto">{{i18n.authorization}}</view>
						<!-- #endif -->
						<view class="name" v-if="userInfo.uid">
							{{userInfo.nickname}}
							<view class="vip" v-if="userInfo.vip">
								<image :src="userInfo.vip_icon" alt="">
									<view style="margin-left: 10rpx;" class="vip-txt">{{userInfo.vip_name}}</view>
							</view>
						</view>
						<view class="num" v-if="userInfo.phone" @click="goEdit()">
							<view class="num-txt">ID：{{ userInfo.uid }}</view>
							<view class="icon"><image src="/static/images/edit.png" mode=""></image></view>
						</view>
						<view class="phone" v-if="!userInfo.phone && isLogin" @tap="bindPhone">{{i18n.banding}}</view>
					</view>
				</view>
				<view class="num-wrapper">
					<view class="num-item" @click="goMenuPage('/pages/users/user_goods_collection/index')">
						<text class="num">{{ userInfo.total_collect_product || 0 }}</text>
						<view class="txt">{{i18n.Attention}}</view>
					</view>
					<!-- <view class="num-item" @click="goMenuPage('/pages/users/user_store_attention/index')">
						<text class="num">{{ userInfo.total_collect_store || 0 }}</text>
						<view class="txt">关注店铺</view>
					</view> -->
					<view class="num-item" @click="goMenuPage('/pages/users/browsingHistory/index')">
						<text class="num">{{ userInfo.total_visit_product || 0 }}</text>
						<view class="txt">{{i18n.Record}}</view>
					</view>
					<view class="num-item" @click="goMenuPage('/pages/users/user_coupon/index')">
						<text class="num">{{ userInfo.total_coupon || 0 }}</text>
						<view class="txt">{{i18n.Discounts}}</view>
					</view>
				</view>
				<view class="right-btn">
					<view class="iconfont icon-shezhi" @click="goEdit()" v-if="userInfo.phone"></view>
					<view class="btn" @click="languagefun">
						{{Language}}
					</view>
					<navigator class="btn" url="/pages/chat/customer_list/index?type=0" hover-class="none">
						<view class="iconfont icon15xiaoxi"></view>
						<text class="iconnum" v-if="userInfo.total_unread">{{ userInfo.total_unread }}</text>
					</navigator>
				</view>
			</view>
		</view>
		<view class="wrapper">
			<view class="order-wrapper">
				<view class="order-hd flex">
					<view class="left">{{i18n.Myorder}}</view>
					<navigator v-if="isLogin" class="right flex" hover-class="none" url="/pages/users/order_list/index" open-type="navigate">
						{{i18n.Allorder}}
						<text class="iconfont iconxianxingxiangyou"></text>
					</navigator>
					<navigator v-if="!isLogin" class="right flex" hover-class="none" @tap="openAuto" open-type="navigate">
						{{i18n.Allorder}}
						<text class="iconfont iconxianxingxiangyou"></text>
					</navigator>
				</view>
				<view class="order-bd">
					<block v-for="(item, index) in orderMenu" :key="index">
						<navigator class="order-item" hover-class="none" :url="item.url">
							<view class="pic">
								<image :src="item.img" mode=""></image>
								<text class="order-status-num" v-if="item.num > 0">{{ item.num }}</text>
							</view>
							<view class="txt">{{ item.title }}</view>
						</navigator>
					</block>
				</view>
			</view>
			<!-- 会员菜单 -->
			<view class="user-menus" style="margin-top: 20rpx;">
				<view class="title">{{i18n.Serve}}</view>
				<view class="menu-box">
					<navigator url="/pages/users/user_money/index" class="item" hover-class="none" v-if="balance_func_status == 1">
						<image src="/static/images/user-menu-001.png"></image>
						<text>{{i18n.Money}}</text>
					</navigator>
					<navigator
						class="item"
						:url="item.url"
						hover-class="none"
						v-if="item.url != '#' && item.url != '/pages/service/index'"
						v-for="(item, index) in MyMenus"
						:key="index"
					>
						<image :src="item.pic"></image>
						<text>{{ item.name }}</text>
					</navigator>
					<navigator url="/pages/admin/order/index" class="item" hover-class="none" v-if="userInfo.service && userInfo.service.customer === 1">
						<image src="/static/images/user-menu-002.png"></image>
						<text>{{i18n.AdminOrder}}</text>
					</navigator>
					<view class="item" hover-class="none" @click="goChat" v-if="userInfo.service">
						<image src="/static/images/user_menu08.png"></image>
						<text>{{i18n.Relation}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="copy-right">
			<view class="iconfont icon-crmeb"></view>
			<view class="text">{{i18n.Company}}</view>
		</view>
		<view style="height: 50rpx;"></view>
	</view>
</template>

<script>
const globalData = getApp().globalData;
import { mapGetters } from 'vuex';
import authorize from '@/components/Authorize';
import { getMenuList, getUserInfo } from '@/api/user.js';
import { orderData } from '@/api/order.js';
import Routine from '@/libs/routine';
export default {
	components: { authorize },
	data() {
		return {
			Language:'',//语言
			
			userInfo: {},
			MyMenus: [],
			is_promoter: 0, //推广人开关  1开
			code: '',
			orderMenu: [
				{
					img: '/static/images/order1.png',
					title: globalData.$t('user').Title1,
					url: '/pages/users/order_list/index?status=0',
					num: 0
				},
				{
					img: '/static/images/order2.png',
					title: globalData.$t('user').Title2,
					url: '/pages/users/order_list/index?status=1',
					num: 0
				},
				{
					img: '/static/images/order3.png',
					title: globalData.$t('user').Title3,
					url: '/pages/users/order_list/user?status=2',
					num: 0
				},
				{
					img: '/static/images/order4.png',
					title: globalData.$t('user').Title4,
					url: '/pages/users/order_list/index?status=3',
					num: 0
				},
				{
					img: '/static/images/order5.png',
					title: globalData.$t('user').Title5,
					url: '/pages/users/refund/list',
					num: 0
				}
			]
		};
	},
	computed: {
		i18n() {
		 return globalData.$t('user');
		},...mapGetters(['isLogin']) 
		},
	methods: {
		// goMenuPage
		goMenuPage(url) {
			if (this.isLogin) {
				uni.navigateTo({
					url
				});
			} else {
				this.openAuto();
s			}
		},
		// 订单数字
		orderNum() {
			orderData().then(({ data }) => {
				console.log(data)
				this.orderMenu.forEach((item, index) => {
					switch (item.title) {
						case globalData.$t('user').Title1:
							item.num = data.noPay;
							break;
						case globalData.$t('user').Title2:
							item.num = data.noPostage;
							break;
						case globalData.$t('user').Title3:
							item.num = data.noDeliver;
							break;
						case globalData.$t('user').Title4:
							item.num = data.noComment;
							break;
						case globalData.$t('user').Title5:
							item.num = data.refund;
							break;
					}
				});
			});
		},
		// 编辑页面
		goEdit() {
			// uni.navigateTo({
			// 	url: '/pages/users/user_info/index'
			// });
		},
		// 绑定手机
		bindPhone() {
			uni.navigateTo({
				url: '/pages/users/user_phone/index'
			});
		},
		openAuto() {
			uni.showLoading({title:this.i18n.Loggingin});
			uni.getUserProfile({
				desc: '授权',
				success: res => {
					let userInfo = res;
					userInfo.mer_id = globalData.mer_id;
					userInfo.code = this.code;
					Routine.authUserInfo(userInfo)
						.then(res => {
							uni.hideLoading();
							this.getUserInfo();
							this.getMyMenus();
							this.orderNum();
						})
						.catch(res => {
							uni.hideLoading();
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						});
				},
				fail: res => {
					uni.hideLoading();
					uni.switchTab({url:'/pages/index/index'});
				}
			});
		},
		// 获取个人用户信息
		getUserInfo: function() {
			let that = this;
			getUserInfo().then(res => {
				that.userInfo = res.data, 
				that.is_promoter = res.data.is_promoter;
			});
		},
		//获取个人中心图标
		getMyMenus: function() {
			let that = this;
			if (this.MyMenus.length) return;
			if (that.isLogin) {
				getMenuList().then(res => {
					that.$set(that, 'MyMenus', res.data.menu);
					this.imgUrls = res.data.banner;
					const item = that.MyMenus.findIndex(item => item.name=='发票管理');
					const index = that.MyMenus.findIndex(item => item.name=='关注店铺');
					that.MyMenus.splice(index, 1);
					that.MyMenus.splice(item, 1);
				});
			}
		},
		languagefun:function(){
			let language = uni.getStorageSync('CURRENT_LANG');
			console.log(language)
			if (language === 'zh_HK') {
				language = globalData._i18n.locale = 'zh_CN';
				this.Language='简'
			} else {
				language = globalData._i18n.locale = 'zh_HK';
				this.Language='繁'
			}
			uni.setStorageSync('CURRENT_LANG', language);
			
			uni.reLaunch({
			    url: '../index/index'
			});
		}
	},
	onLoad() {
		let language = uni.getStorageSync('CURRENT_LANG')
		if(language=='zh_HK'){
			this.Language='繁'
		}else{
			this.Language='简'
		}
		if(this.isLogin){
			this.getUserInfo();
			this.getMyMenus();
			this.orderNum();
		}else{
			Routine.getCode()
				.then(code => {
					this.code = code;
				})
				.catch(res => {});
		}
	}
};
</script>

<style lang="scss">
.new-users {
	.head {
		background: #fff;

		.user-card {
			position: relative;
			width: 100%;
			padding: 35rpx 0 70rpx;
			background: linear-gradient(90deg, #eb3c3c 0%, #ff5d43 100%);

			.bg {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-image: url('@/static/images/user_bg.png');
				background-size: 100% 100%;
			}

			.user-info {
				z-index: 20;
				position: relative;
				display: flex;
				padding: 0 28rpx;

				.avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}

				.info {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 20rpx;
					padding: 15rpx 0;

					.name {
						display: flex;
						align-items: center;
						color: #fff;
						font-size: 31rpx;

						.vip {
							display: flex;
							align-items: center;
							height: 36rpx;
							padding: 0 20rpx;
							background: rgba(0, 0, 0, 0.2);
							border-radius: 18px;
							font-size: 20rpx;
							margin-left: 12rpx;

							image {
								width: 27rpx;
								height: 27rpx;
							}
						}
					}

					.num {
						display: flex;
						align-items: center;
						font-size: 26rpx;
						color: rgba(255, 255, 255, 0.6);

						image {
							width: 22rpx;
							height: 23rpx;
							margin-left: 20rpx;
						}
					}
				}
			}

			.num-wrapper {
				z-index: 30;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 30rpx;
				// padding: 0 47rpx;
				color: #fff;

				.num-item {
					width: 25%;
					text-align: center;

					.num {
						font-size: 42rpx;
						font-weight: bold;
					}

					.txt {
						margin-top: 8rpx;
						font-size: 22rpx;
						color: rgba(255, 255, 255, 0.6);
					}
				}
			}

			.sign {
				z-index: 200;
				position: absolute;
				right: -12rpx;
				top: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 120rpx;
				height: 60rpx;
				background: linear-gradient(90deg, rgba(255, 225, 87, 1) 0%, rgba(238, 193, 15, 1) 100%);
				border-radius: 29rpx 4rpx 4rpx 29rpx;
				color: #282828;
				font-size: 28rpx;
				font-weight: bold;
			}
		}
	}

	.wrapper {
		position: relative;
		top: -44rpx;
		padding: 0 20rpx;
	}

	.order-wrapper {
		background-color: #fff;
		border-radius: 12rpx;

		.order-hd {
			display: flex;
			height: 80rpx;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px dashed #dddddd;
			padding: 0 30rpx;
			font-size: 30rpx;
			color: #282828;

			.right {
				align-items: center;
				color: #666666;
				font-size: 26rpx;

				.icon-xiangyou {
					margin-left: 5rpx;
					margin-top: 6rpx;
					font-size: 26rpx;
				}
			}
		}

		.order-bd {
			display: flex;
			// padding: 0 24rpx;

			.order-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 20%;
				height: 160rpx;

				.pic {
					position: relative;
					text-align: center;

					image {
						width: 56rpx;
						height: 56rpx;
					}
				}

				.txt {
					margin-top: 15rpx;
					font-size: 26rpx;
					color: #454545;
				}
			}
		}
	}

	.user-menus {
		padding-bottom: 30rpx;
		background-color: #fff;

		.title {
			height: 80rpx;
			line-height: 80rpx;
			padding: 0 30rpx;
			border-bottom: 1px dashed #dddddd;
		}

		.item {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			width: 25%;
			line-height: 28rpx;
			height: 90rpx;
			margin-top: 30rpx;
			text-align: center;

			image {
				width: 52rpx;
				height: 52rpx;
			}

			text {
				margin-top: 10rpx;
				font-size: 26rpx;
				color: #282828;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				width: 78%;
			}

			&:last-child::before {
				display: none;
			}
		}

		button {
			font-size: 28rpx;
		}
	}

	.phone {
		color: #fff;
	}

	.order-status-num {
		min-width: 12rpx;
		background-color: #fff;
		color: #ee5a52;
		border-radius: 15px;
		position: absolute;
		right: -14rpx;
		top: -15rpx;
		font-size: 20rpx;
		padding: 0 8rpx;
		border: 1px solid #ee5a52;
	}
}

.copy-right {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #cccccc;
	font-size: 22rpx;

	.iconfont {
		font-size: 60rpx;
	}
}

.menu-box {
	display: flex;
	flex-wrap: wrap;
}

.right-btn {
	z-index: 99;
	position: absolute;
	right: 30rpx;
	top: 40rpx;
	display: flex;
	align-items: center;
	color: #fff;

	.iconfont {
		font-size: 40rpx;
		margin-left: 33rpx;
	}

	.btn {
		position: relative;
		font-size: 34rpx;
		line-height: 1;
	}

	.iconnum {
		min-width: 6px;
		background-color: #fff;
		color: #e93323;
		border-radius: 15rpx;
		position: absolute;
		right: -10rpx;
		top: -10rpx;
		font-size: 10px;
		padding: 0 4px;
	}
}
</style>
